<template>
    <div class="book-class">
        <!-- 正在加载 -->
        <div 
            class="is-loading"
            v-if="isLoading">
                <img src="@/assets/img/loading.gif" alt="">
        </div>
        <!-- 加载完成 -->
        <div 
            class="tag"
            v-if="!isLoading">
            <!-- 头部分类导航 -->
            <div class="tag-list">
                <span 
                    class="tag-item"
                    v-for="item,index in tagList"
                    :key="index"
                    :class="{active:tagIndex==index}"
                    @click="changeTag(index)">
                    {{item.cateName}}
                </span>
            </div>
            <!-- 分类里的小说 -->
            <div 
                class="tag-novel"
                v-for="item,index in tagList"
                :key="index">
                <keep-alive>
                    <book-class-page
                        :tagData ='item'
                        v-if="tagIndex==index"
                    ></book-class-page>
                </keep-alive>

            </div>
        </div>
    </div>
</template>

<script>
import bookClassPage from '@/pages/bookClassPage'
export default {
    name: 'bookClass',
    components: {
        bookClassPage: bookClassPage
    },
    data() {
        return {
            isLoading: true,
            tagList:[],
            tagIndex: 0,
        }
    },
    methods: {
        // 请求分类的标签，
        loadTag() {
            axios.get('https://apis.netstart.cn/yunyuedu/simpleCategroy.json')
                .then((success)=>{
                    console.log(success);
                    let male = [];
                    let female = [];
                    for(let i in success) {
                        if(success[i].channel == 'male'){
                            let len = success[i].cates.length;
                            len = len >= 4 ? 4 : len;
                            male = male.concat(success[i].cates.slice(0,len));
                            male.forEach((item)=>{
                                item.channel = 'male';
                            })
                        }
                        if(success[i].channel == 'female'){
                            let len = success[i].cates.length;
                            len = len >= 4 ? 4 : len;
                            female = female.concat(success[i].cates.slice(0,len));
                            female.forEach((item)=>{
                                item.channel = 'female';
                            })
                        }
                    }
                    this.tagList = this.tagList.concat(male);
                    this.tagList = this.tagList.concat(female);
                    console.log(this.tagList);
                    this.isLoading = false;
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
        // 点击分类的标签事件
        changeTag(index) {
            this.tagIndex = index;
        }
    },
    mounted() {
        this.loadTag();
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
.is-loading {
    width: 100%;
    height: 100%;
    position: fixed;
    img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
}
.tag {
    .tag-list {
        background-color: #dddddd;
        padding: 10px 20px;
        box-shadow: 0px -10px 20px rgb(255, 255, 255) inset;
        position: sticky;
        top: 0;
    }
    .tag-item {
        font-size: 18px;
        margin: 5px;
        display: inline-block;
        padding: 5px 10px;
        background-color: white;
        border-radius: 5px;
        
        &.active {
            background-color: $color1;
            color: white;
            font-family: oppo-l;
            font-weight: bold;
        }
    }
}
</style>